{include file="public/header" /}
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/style.css">
<link href="/static/admin/css/select2.min.css" rel="stylesheet">
<style>
    .file-item{float: left; position: relative; width: 110px;height: 110px; margin: 0 20px 20px 0; padding: 4px;}
    .file-item .info{overflow: hidden;}
    .uploader-list{width: 100%; overflow: hidden;}
</style>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <!--<h5>显示：</h5>
                            <a href="file_manager.html#" class="file-control active">所有</a>
                            <a href="file_manager.html#" class="file-control">文档</a>
                            <a href="file_manager.html#" class="file-control">视频</a>
                            <a href="file_manager.html#" class="file-control">图片</a>
                            <div class="hr-line-dashed"></div>-->

                            <!--dom结构部分-->
                            <div class="col-sm-6">
                                <div id="uploader-demo">
                                    <!--用来存放item-->
                                    <div class="file-item thumbnail" id="imgDiv" style="display: none">
                                        <input type="hidden" name="img">
                                        <img id="img" src="" width="100px">
                                    </div>

                                    <div id="imgFileList" class="uploader-list"></div>
                                    <div id="imgFilePicker" style="width:100%;">上传图片</div>
                                </div>
                            </div>
                            <a onclick="order()" id="btnorder" class="btn btn-info">更新排序</a>
                            <div class="hr-line-dashed"></div>
                            <h5>分类</h5>
                            <ul class="folder-list" style="padding: 0">
                                <li><a href="{:url('scene/index')}"><i class="fa fa-folder"></i> 场景</a>
                                </li>
                                <li><a href="{:url('facade/index')}"><i class="fa fa-folder-open"></i> 门面</a>
                                </li>
                                <li><a href="{:url('figure/index')}"><i class="fa fa-folder"></i> 人物</a>
                                </li>
                                <li><a href="{:url('element/index')}"><i class="fa fa-folder"></i> 元素</a>
                                </li>
                            </ul>
                            <!--<h5 class="tag-title">标签</h5>
                            <ul class="tag-list" style="padding: 0">
                                <li><a style="background-color:#52b095;color:white" href="file_manager.html">人物基本</a>
                                </li>
                                <li><a href="file_manager.html">头部</a>
                                </li>
                                <li><a href="file_manager.html">上半身</a>
                                </li>
                                <li><a href="file_manager.html">下半身</a>
                                </li>
                                <li><a href="file_manager.html">人物其他</a>
                                </li>
                            </ul>-->
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 animated fadeInRight">
                <div class="row">
                    <div class="col-sm-12">
                        <form id="ruleorder" name="ruleorder" method="post" action="{:url('order')}" >
                        <div class="layer-photos-demo">
                            {foreach $list as $vo}
                                <div class="file-box">
                                    <div class="file">
                                        <span class="corner"></span>

                                        <div class="image">
                                            <img alt="image" class="img-responsive" src="{$vo.icon_path}">
                                        </div>
                                        <div class="file-name">
                                            <div class="col-sm-8">
                                                <input type="number" class="form-control" name="{$vo.id}" value="{$vo.sort}">
                                            </div>
                                            <a onclick="remove('{$vo.id}')" class="btn btn-white btn-bitbucket">
                                                <i class="fa fa-times"></i>
                                            </a>
                                            <!--<small>添加时间：2014-10-13</small>-->
                                        </div>
                                    </div>
                                </div>
                            {/foreach}
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{include file="public/footer" /}
<script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script>
<script src="/static/admin/js/select2.full.min.js"></script>
<script type="text/javascript">

layer.photos({
  photos: '.layer-photos-demo'
 ,anim: false //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});

function remove(id) {
    layer.confirm('确认删除吗', {icon: 3}, function(index){
        layer.close(index);
        window.location.href = "{:url('delete')}?id=" + id;
    });
}

  function order() {
    $('#ruleorder').ajaxSubmit({
      url: '{:url("order")}',
      type: 'POST',
        beforeSend:function() {
            // 显示loading
            index2 = layer.load(0, {
                shade: [0.3,'#fff']
            });
            $("#formSubmit").attr('type', 'button')
        },
        success: function(data){

            if (data['code'] != 1) {
                layer.msg(data.msg,{icon:2,time:1000,shade: 0.1,}, function(index){
                    layer.close(index)
                });
                $("#formSubmit").attr('type', 'submit')
                return false;
            }

            layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                window.location.href="{:url('index')}"
            });
        },
        error: function(XmlHttpRequest, textStatus, errorThrown){
            layer.msg('error!',{icon:1,time:1000});
        },
        complete:function() {
            // 隐藏loading
            layer.close(index2);
        }
    });
  }

// 初始化Web Uploader
var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf: '__ADMIN__/webupload/Uploader.swf',

    // 文件接收服务端。
    server: "{:url('uploadImg')}",

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick : '#imgFilePicker',

    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },

    'onUploadSuccess': function(file, data, response) {

//            var width = file._info.width;
//            var height = file._info.height;
//
        layer.close(index2);

//            if(width != 750 || height != 470) {
//                layer.alert('图片尺寸必须为750*470')
//                $("#data_photo").val('');
//                $("#img_data").attr("src", '');
//            } else {
//            $("#imgDiv").show();
            $("input[name=img]").val(data._raw);
            $("#img").attr('src', data._raw).show();
            window.location.reload();
//            }
    }
});

// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    // 显示loading
    index2 = layer.load(0, {
        shade: [0.3,'#fff']
    });
});

// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
    layer.msg('上传失败');
});
</script>
</body>
</html>